<template>
  <view>
    <view v-show="ismodal" class="centerInfo">
      <movable-area>
        <block v-for="(item, index) in list" :key="item.id">
          <movable-view
            :damping="20"
            :x="item.x"
            :y="item.y"
            inertia
            out-of-bounds
            direction="horizontal"
            @change="onMovableChange($event, index)"
          >
            <view
              class="item"
              :style="{
                position: 'relative',
                zIndex: index + 1,
                transform: `scale(${
                  index == list.length - 1 ? 1 : 1 - (list.length - index) / 100
                }) translateY(${-index * 10}px)`,
                transition: 'all .3s',
              }"
            >
              <!-- <image :src="item.imgurl" :width="600" :height="800"></image> -->
              <view>
                <!-- <textarea
                  class="textarea"
                  :value="item.content"
                  
                  :style="{
                    backgroundImage: 'url(' + item.imgurl + ')',
                    width: '470rpx',
                  }"
                /> -->

                <image class="textarea" :src="item.imgurl" mode="scaleToFill" />
                <view class="content">{{ item.content }} </view>
                <view
                  class="black"
                  :style="{ display: list.length == 1 ? 'none' : 'bolck' }"
                >
                  <uni-icons
                    custom-prefix="close"
                    type="close"
                    size="30"
                    color="#6A3C16"
                    @click="black(index)"
                  ></uni-icons>
                </view>
              </view>
            </view>
          </movable-view>
        </block>
      </movable-area>
    </view>
  </view>
</template>
<script>
import { busTreviFountainmyWish } from "../../../../utils/api.js";
import { imgBaseUrl } from "../../../../utils/baseUrl";
export default {
  data() {
    return {
      ismodal: true,
      list: [],
      isgdbtn: true,
      ids: [],
      arr: [],
    };
  },
  async mounted() {
    await this.datalist();
  },
  methods: {
    //我的还愿池数据
    async datalist() {
      console.log(this.$parent.wishType, "wishType");
      this.$nextTick(async () => {
        const result = await busTreviFountainmyWish({
          wishType: this.$parent.wishType,
        });
        uni.setStorageSync("arr", result.result);
        this.arr = result.result;
        const data = result.result.map((item) => {
          item["isbox"] = false;
          item["imgurl"] =
            "https://ctrlsoft.net.cn/app_static/hesaid/img/missimg/biaoqian.png";
          item["x"] = 0;
          item["y"] = 0;
          item["old"] = { x: 0, y: 0 };
          return item;
        });
        console.log(data, "data");
        this.list = data;

        this.ids = data[data.length - 1].id;
        console.log(this.ids, "ids");
      });
    },
    // },
    radioChange(e) {
      this.ids.push(e.target.value);
    },
    //判定选中还是取消
    radioClick(index) {
      this.list[index].isbox = !this.list[index].isbox;
    },
    // 图片渲染
    getImgUrl(image) {
      return imgBaseUrl + image;
    },
    /**
     * 移动回调
     */
    onMovableChange(event, index) {
      if (index == 0) {
        this.list.splice(index, 1);
        this.$nextTick(() => {
          // this.datalist();
          this.$emit('clear')
        });
      } else {


        let item = this.list[index];
       
        let { x, y, source } = event.detail; // 赋值当前坐标
        item.x = 0
        this.ids = this.list[index - 1].id;

        // if(x < 0)
        // {
        //   if(x <= -200 || y <= -400)
        // {
        //   this.ids = this.list[index - 1].id;
        // }else
        // {
        //   this.ids = this.list[index].id;
        // }
        // }else
        // {
        //   if(x > 300 || y > 500)
        //   {
        //     this.ids = this.list[index - 1].id;
        //   }else
        //   {
        //     this.ids = this.list[index].id;
        //   }
        // }

        // item.old.x = x;
        // item.old.y = y;

        // 移动结束/手指离开屏幕
        if (source == "friction") this.onMovableEnd(index);
      }
    },
    /**
     * 移动结束回调
     */
    onMovableEnd(index) {
      
      let item = this.list[index];
      this.list[index].x = 0;
      this.list[index].y = 0;
      let { x, y } = item.old; // 获取当前坐标
      if (x >= 10 || y < 10) {
        // 超出右边界
        this.removeItem(index, "like");
      } else if (x <= -10 || y >= -10) {
        // 超出左边界
        this.removeItem(index, "unlike");
      } else {
        // 没有超出边界，回到中心点
        this.resetItem(index);
      }
    },
    /**
     * 移除卡片
     */
    removeItem(index, mode) {
      let item = this.list[index];
      item.x = item.old.x;
      item.y = item.old.y;

      // 滚动到屏幕外
      this.$nextTick(() => {
        // item.x = mode == "like" ? 100 : -100; // 喜欢向右滚出、不喜欢向左滚出
        // item.y = item.old.y <= 0 ? item.old.y - 100 : item.old.y + 100; // y小于0说明向上滑出，加一点向上的偏移值，效果好一些

        setTimeout(() => {
          // 移除数据（等动画结束）
          this.list.splice(index, 1);
          console.log(item.x, item.y, "xxxxx");
          if (mode == "unlike") {
            if (item.x > -300) {
              // this.datalist();
              this.list.splice(index, 1);
            }
          } else {
            if (item.x < 100) {
              this.list.splice(index, 1);
              // this.datalist();
            }
          }
        }, 200);
      });
    },
    /**
     * 重设卡片
     */
    resetItem(index) {
      console.log(index, "index//////");
      let item = this.list[index];
      item.x = item.old.x;
      item.y = item.old.y;

      this.$nextTick(() => {
        item.x = 0;
        item.y = 0;
        // this.datalist();
      });
    },
    black(index) {
      if (index == 0) {
        this.$nextTick(() => {
          this.datalist();
        });
      } else {
        this.list.splice(index, 1);
        this.ids = this.list[index - 1].id;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding-top: 5vh;

  .right_font {
    width: 54px;
    height: 25px;
    font-size: 18px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.centerInfo {
  position: absolute;
  /* left: 5%; */
  top: 10%;
  left: -1rpx;
  z-index: 100000;
  height: calc(
    100vh - var(--status-bar-height) - 120rpx - var(--window-bottom)
  );
  overflow: hidden;
  movable-area {
    position: relative;
    width: 300vw;
    height: 300vh;
    left: calc(-105vw);
    top: calc(-105vh);
    /* background-color: salmon; */
  }

  movable-view {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 34rpx;
    margin: auto;
    width: 600rpx;
    height: 800rpx;
  }

  .item {
    .textarea {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      width: 642rpx;
      height: 451rpx;
    }
    .content {
      width: 433rpx;
      line-height: 48rpx;
      position: relative;
      bottom: 380rpx;
      left: 100rpx;
      font-size: 28rpx;
      color: #6a3c16;
      font-weight: 400;
      font-family: PingFang SC-Regular, PingFang SC;
    }
    .black {
      position: absolute;
      right: -5rpx;
      top: 12px;
    }
  }
}
</style>
